<template>
  <div class="word-cloud-block">
    <div class="title">个人词云</div>
    <div class="word-cloud" id="word-cloud"></div>
  </div>
</template>

<script>
import WordCloud from "wordcloud";
// import { GetCiYun } from "@/api/task/report.js";
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    buildWordCloud(data = []) {
      WordCloud(document.getElementById("word-cloud"), {
        list: data,
        backgroundColor: "#151720",
        color: () => {
          //console.log(word, weight, fontSize, distance, theta);
          let c = [
            "#FF5252",
            "#7675A7",
            "#FFDA76",
            "#41FDEF",
            "#5A6EFF",
            "#FF945A",
            "#0D70BF",
          ];
          return c[Math.floor(Math.random() * 7)];
        },
        minRotation: 0,
        maxRotation: 0,
        gridSize: 15,
      });
    },
  },
  mounted: function() {
    //this.$route.query.id
    this.buildWordCloud(this.data || []);
  },
  components: {},
};
</script>
<style lang="scss">
.word-cloud-block {
  .title {
    color: #fff;
  }
  .word-cloud {
    margin: 6px;
    width: 90%;
    height: 336px;
    margin-bottom: 30px;
  }
}
</style>
